<template>
    <div class="scroll_content" @touchmove.stop="stop_slider" @touchstart="start_slider">
        <div class="fixd_wrap">
            <back :title="'全部评价'"></back>
        </div>
        <div class="scroll_wrap" ref="scroll_wrap" @scroll="brand_wrap_scroll">
          <div class="item_wrap"  v-if="allComment">
            <img :src="allComment.goods.imgpath" alt="">
            <div>
              <p>{{allComment.goods.names}}</p>
              <span>¥{{allComment.goods.price}}</span>
            </div>

          </div>
          <div class="nav_wrap" v-if="allComment">
            <div>
              <span>总评价（{{allComment.other.totalUsersTimes}}）</span>
              <p>好评率 {{allComment.other.goodAppraise}}</p>
            </div>
            <ul >
              <li :class="keyWordId===item.adjId?'active':''" v-for="item in allComment.other.review" @click="select_keyWord(item.adjId)">{{item.names}}</li>
            </ul>
          </div>
          <div class="comments_content" v-if="allComment">
            <p v-if="commentList.length===0&&!loading">没有找到哦亲！</p>
            <p v-if="loading&&commentList.length===0">加载中...</p>
            <div class="comment_wrap" >
              <div class="comment_body" v-if="commentList.length>0" v-for="(comment , commentIndex) in commentList">
                <h1>
                  <img :src="comment.icon" alt="">
                  <b>{{comment.user}}</b>
                  <p>
                    <span :class="index<=comment.score?'active':''" v-for="index in 5"></span>
                  </p>
                </h1>
                <div>
                  <span>{{comment.createTime}}</span>
                  <b>规格：{{comment.specs}}</b>
                  <p>{{comment.content}}</p>
                  <ul>
                    <li v-for="(item , imgIndex) in comment.thumbnail">
                      <div>
                        <img v-lazy="item" alt="">
                        <div @click.prevent="setUrl(commentIndex,imgIndex)" ></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <p v-if="loading&&commentList.length>0">加载中...</p>
              <p v-if="!loading&&commentList.length>0">没有更多了</p>
            </div>
          </div>
        </div>
      <loading-img @cancleImg="cancleImg"  v-if="url" :url="url"></loading-img>
    </div>
</template>

<script>
    import back from 'components/back'
    import {stop_slider} from 'assets/base/base'
    import {get_cookie} from 'assets/cookie/cookie'
    import {get_order_detial} from 'api/order'
    import {get_comment_list,get_comment_word} from 'api/comment'
    import loadingImg from 'base/loadingImg'

    export default {
        name: "commentList",
        data() {
            return {
              allComment:null,
              commentList:[],
              keyWordId:0,
              isMore:false,
              page:1,
              url:'',
              loading:false
            }
        },
        created() {
          this.get_comment_list()
          this.brand_wrap_scroll()
        },
        activated() {
        },
        computed: {},
        methods: {
            start_slider(e) {
                this.start = {
                    X: e.touches[0].pageX,
                    Y: e.touches[0].pageY
                }
            },
            stop_slider(e) {
                stop_slider(e, this.$refs.scroll_wrap, this.start)
            },
            brand_wrap_scroll() {
              if(this.$refs.scroll_wrap){
                if ((this.$refs.scroll_wrap.scrollHeight - this.$refs.scroll_wrap.clientHeight <= this.$refs.scroll_wrap.scrollTop + 320&&!this.loading)) {
                  if(this.isMore&&this.$route.path === "/commentList"){
                    this.get_comment_list()
                  }
                }
              }
          },
            get_comment_list(){
              this.loading=true
              if(this.page===1){
                this.commentList=[]
              }
               get_comment_list({
                goodsId:this.$route.query.itemId,
                page:this.page,
                adjId:this.keyWordId
              }).then(res=>{
                this.loading=false
                 console.log(res.data.data)
                if(res.status===200&&res.data.resStatus===0){
                   this.isMore=res.data.data.isMore
                  this.allComment=res.data.data
                  if(this.page===1){
                    this.commentList=res.data.data.appraises||[]
                  }else{
                     this.commentList=this.commentList.concat(res.data.data.appraises||[])
                  }
                  if(this.isMore){
                     this.page++
                  }
                }
            })
          },
            setUrl(commentIndex,imgIndex){
              this.url=this.commentList[commentIndex].images[imgIndex]
            },
            cancleImg(){
              this.url=''
            },
          select_keyWord(id){
             this.keyWordId=id
             this.page=1
            this.get_comment_list()
          }
        },
        components: {
            back,
          loadingImg
        }
    }
</script>

<style scoped lang="scss">
    .scroll_content {
        position: fixed;
        background: #fff;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    .fixd_wrap {
        max-width: 768px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
    }

    .scroll_wrap {
        height: 100%;
      padding-top: 53px;
        overflow: auto;
        max-width: 768px;
        margin: 0 auto;
        -webkit-overflow-scrolling: touch;
    }
    .item_wrap{
    height: 50px;
    padding-top: 1px;
    >img{
      float: left;
      width: 40px;
      height: 40px;
      background: #f10;
      margin-left: 20px;
      margin-top: 5px;
      margin-right: 12px;
    }
    >div{
      margin-top: 11px;
      text-align: left;
      font-size: 14px;
      margin-left: 16px;
      margin-right: 10px;
      overflow: hidden;
      >p{
        margin-bottom: 4px;
        font-weight: 700;
        font-size: 14px;
      }
      >span{
        color: #50b3e1;
        font-weight: 500;
      }
    }
  }
    .nav_wrap{
    padding-top: 15px;
    padding-bottom: 2px;
    background-color: #eee;
    margin-top: 12px;
    >div{
      background: #fff;
      height: 45px;
      line-height: 45px;
      >span{
        float: left;
        margin-left: 20px;
        font-size: 14px;
        font-weight: 700;
      }
      >p{
        float: right;
        margin-right: 24px;
        color: #cc1a3a;
        font-weight: 700;
      }
    }
    >ul{
      width: 100%;
      background: #fff;
      overflow: hidden;
      padding: 16px 20px 5px;
      >li{
        padding: 9px;
        float: left;
        background: #f0f0f0;
        font-weight: 700;
        margin-right: 12px;
        margin-bottom: 5px;
        border-radius: 3px;
      }
      >.active{
        background-color: #019fe8;
        color: #fff;
      }
    }
  }
    .comments_content{
     >p{
       margin-top: 30px;
       color: #999;
     }
   }
    .comment_wrap{
     >p{
      height: 40px;
       line-height:40px;
       color: #999;
       border-top: 1px solid #eee;
     }
   }
      .comment_body{
        background: #fff;
        >h1{
          height: 50px;
          font-size: 14px;
          line-height: 50px;
          >img{
            width: 35px;
            height: 35px;
            float: left;
            background: #f10;
            margin-top: 7px;
            margin-left: 20px;
          }
          >b{
            float: left;
            margin-left: 14px;
            font-weight: 600;
          }
          >p{
            float: right;
            width:90px;
            height: 15px;
            margin-top: 15px;
            margin-right: 16px;
            >span{
              display: block;
              float: left;
              width: 15px;
              height: 15px;
              margin-right: 3px;
              background-size: 100% 100%;
              background-image: url('../assets/img/appraise/apparise_star_nor.png');
            }
            >.active{
              background-image: url('../assets/img/appraise/apparise_star_sel.png');
            }
          }

        }
        >div{
          text-align: left;
          >p{
            line-height: 18px;
            font-weight: 600;
            margin-left: 20px;
          }
          >b{
            line-height: 18px;
            height: 18px;
            color: #999;
            margin-left: 20px;
          }
          >span{
            color: #999;
            margin-left: 20px;
          }
          >ul{
            width: 98%;
            margin:  0 auto;
            overflow: hidden;
            padding-top: 10px;
            padding-bottom: 15px;
            >li{
              width: 32.33%;
              padding-top: 32.33%;
              text-align: center;
              float: left;
              position: relative;
              margin: 0.5%;
              >div{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 2px;
                overflow: hidden;
                >div{
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  z-index: 2;
                }
                >img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
</style>
